<template>
	<div class="datalist">
		<div class="title">
			{{loadData.name}}
		</div>
		<van-divider />
		<div class="list-item" v-for="index in list" :key="index.id" @click="todetail(index)">
			<div class="content-t">
				<div class="imageBox">
					<img :src="index.coverimages_text[0]" alt="">
				</div>
				<div class="info">
					<div class="name van-ellipsis">{{index.title}}</div>
					<div class="desc van-multi-ellipsis--l3">{{index.title}}</div>
				</div>
			</div>
			<div class="content-d">
				<span>发布于{{index.resource}}</span>
				<span>{{index.publishtime_text}}</span>
				<span>{{index.comment}}评论</span>
			</div>
		</div>
	</div>
</template>

<script>
	import showimg from "@/assets/img/showimg.png"
	export default {
		name: "DataList",
		components: {

		},
		data() {
			return {
				showimg:showimg,
				loadData:{},
				list:{},
				limit:10,
				page:1
			}
		},
		mounted() {
			this.loadData = this.$localStorage.get("secondLevel")
			this.getData()
		},
		methods:{
			todetail(item){
				this.$router.push({name:'articledetail',query:{id:item.id}})
			},
			getData(){
				
				let detailData = {
					category_id:this.loadData.url,
					limit:this.limit,
					page:this.page
				}
				this.$api.home.articleList(detailData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.list = res.data.data
					}
				
				})
			}
		}


	}
</script>

<style scoped lang="less">
	.datalist {
		padding: 1.13rem 0.78rem;
		background: #fff;

		.title {
			font-size: 0.94rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(38, 38, 38, 1);
		}

		.list-item {
			margin-bottom: 2.13rem;
			.content-t {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.imageBox{
					width:8.44rem;
					height:5.38rem;
					overflow: hidden;
					border-radius:0.3rem;
					margin-right: 1.28rem;
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.info{
					height: 100%;
					flex: 1;
					.name{
						font-size:0.81rem;
						font-family:PingFang SC;
						font-weight:bold;
						color:rgba(44,44,44,1);
						margin-bottom: 0.97rem;
						margin-top: 0.4rem;
						max-width: 13rem;
					}
					.desc{
						font-size:0.75rem;
						font-family:PingFang SC;
						font-weight:500;
						color:rgba(86,86,86,1);
						line-height:0.94rem;
					}
				}
			}
			.content-d{
				font-size:0.75rem;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(124,124,124,1);
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 1.38rem;
			}

		}
	}
</style>
